<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调查问卷</title>
    <%@include file="../../common/includeBaseSet.jsp" %>
    <%@include file="../../common/includeSystemSet.jsp" %>
    <%@include file="../../common/operation_forbid.jsp" %>
    <%@include file="../../common/jsVersion.jsp" %>
    <link rel="stylesheet" href="${jypath}/resources/css/questionnaireStyle.css">
    <style type="text/css">
        a{cursor:pointer}
        .line_solid{border-right:1px solid #A9A9A9;}
        .line{border:1px dashed #A9A9A9;}
        .tdStyle{width:50%;} 
        .mar{margin-left:10px} 
    </style>
</head>
<body >
    <div class="questionnaire color444">
        <div class="qs-title qs-list">
            <span class="qs-span">项目名称：${project.projectName }</span>
            <span class="qs-span">客户姓名：${customer.customerName }</span>
            <span class="qs-span">联系电话：${customer.customerPhone }</span>
        </div>
        <div class="tab-box">
            <!-- 问题 -->
            <div class="qs-main qs-list">
                <h2 class="qs-search font14px color444">问卷结果</h2>
                <form id="baseForm">
                    <input type='hidden' class='pageNum' id='pageNum' name='pageNum' value='1'/>
                    <input type='hidden' class='pageSize' id='pageSize'  name='pageSize' value='8'/>
                </form>
                <table id="baseTable" style="width:100%">
                        <!-- 问卷内容 -->
                </table>
                <!--设置分页位置-->
                <div id="pageing" class="dataTables_paginate paging_bootstrap">
                   <ul class="pagination"></ul>
                </div>
            </div>
            <!-- tag内容 -->
            <div class="qs-main">
                <h2 class="qs-search font14px color444">标签内容</h2>
                <div class="detail-box">
                    <div class="qs-item qs-relation">
                        <form id="cusTagForm">
                            <input type='hidden' class='pageNum' id='tagPageNum' name='tagPageNum' value='1'/>
                            <input type='hidden' class='pageSize' id='tagPageSize'  name='tagPageSize' value='4'/>
	                        <div class="item-inline">
	                            <span class="qs-tag">标签类别：</span>
	                            <select class="margin60 qs-select arrow-select"  id="typeId">
	                                <option value=""selected>全部</option>
	                                <c:forEach items="${tagList}" var="list">
			                           <option value="${list.id}">${list.tagName}</option>
			                        </c:forEach>
	                            </select>
	                        </div>
	                        <div class="item-inline">
	                            <span class="qs-tag">标签搜索：</span>
	                            <input class="margin12 width200 border999" placeholder="  输入您要搜索的标签内容"  id="tagName"   onkeydown="return ClearSubmit(event)">
	                        </div>
	                        <div class="item-inline">
	                            <a onclick="JY.Page.jump('cusTagForm',1,'queryCusTagList')" class="qs-btn-default border40a qs-button-small">查询</a>
	                            <a onclick="clearFrom()" class="qs-btn-default color999 qs-button-small">清空</a>
	                        </div>
	                    </div>
                    </form>
                    <!-- 详情列表 -->
                    <ol id="cusTagList" class="qs-list qs-relation">
                        <!-- 标签内容 -->
                    </ol>
                    <!--设置分页位置-->
	                <div id="cusTagPageing" class="dataTables_paginate paging_bootstrap">
	                   <ul class="pagination"></ul>
	                </div>
                </div>
                <!-- 新增tag弹出窗口 -->
                <div class="seting-box">
                    <div class="qf-act-box border-all ">
                        <ul>
                            <li>
                                <span class="pull-left">增加标签</span>
                                <a onclick="openCusTag()" class="pull-right tag-add">
                                    <img src="${jypath}/resources/images/icon-act-add.png" alt="">
                                </a>
                            </li>
                            <li>
                                <span class="pull-left">修改标签</span>
                                <a onclick="editCusTag()" class="pull-right">
                                    <img src="${jypath}/resources/images/icon-act-add.png" alt="">
                                </a>
                            </li>
                            <li>
                                <span class="pull-left">删除</span>
                                <a onclick="delCusTagConfirm()" class="pull-right">
                                    <img src="${jypath}/resources/images/icon-act-del.png" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="${jypath}/static/js/system/questionnaire/questionnaire.js"></script>
</body>
<script type="text/javascript">
   $(function(){
	   queryQuestion();
	   queryCusTagList();
   });
   //保存问卷ID
   var projectQuestionId = "";
   var total = 0;
   function queryQuestion(){
	   var params = {
			"customerId": "${customerId}",
			"projectId": "${projectId}",
            "pageNum": $("#pageNum").val(),
            "pageSize": $("#pageSize").val()
        };
        JY.Ajax.doRequest(null, jypath +'/customer/customerProjectQuestion/cusTagQuestionList', params, function(data){
            $("#baseTable").empty();
            var page = data.obj;
            //数据集合
            var results = page.rows;
            //分页数据
            var pageNum = page.pageNumber, pageSize = page.pageSize, totalRecord = page.total;
            total = page.total;
            if(results != null && results.length > 0){
                var html = "<tr>";
                for(var i = 0; i < results.length; i++){
                    var info = results[i];
                    if(i == 0){
                    	projectQuestionId = info.projectQuestionnaireId;
                    	//初次循环增加表头
                    	html +='<td class="line_solid tdStyle">'
                             + '<div class="qs-list qs-relation">';
                    }else if(i == 4){
                    	//循环到一半时添加表结尾和新表头换行
                    	html +='</div>'
                             + '</td>'
                             + '<td class="tdStyle">'
                             + '<div class="qs-list qs-relation">';
                    }
                    //问卷实际内容
	                html +='<h3>'+info.sort+'、'+info.question+'</h3>'
                         + '<span class="mar">'+info.answer+'</span>';
                }
                //拼接结尾
                html +='</div></td></tr>'
                $("#baseTable").append(html);
                JY.Page.setSimPage("baseForm","pageing",pageSize,pageNum,totalRecord,"queryQuestion");
            }else{
                //隐藏分页
                $("#pageing ul").empty();
            }
        });
   }
   
   //打开客户标签库
   function openCusTag(){
	   if(total == 0){
		   //layer.msg("该客户尚未填写问卷，不能增加标签");
		   //return false;
	   }
	   layer.open({
           type:2,
           title: "客户标签库",
           closeBtn: 1,
           shadeClose: true,
           //maxmin: true, //开启最大化最小化按钮
           area: ['630px', '530px'],
           offset: ['50px', '300px'],
           fix: false, //不固定
           content: jypath +'/customer/projectQuestion/openCusTag?customerId=${customerId}'
       });
   }
   
   function getCusTagList(cusTagIds, custId, type){
	   var index = layer.open({
           type:2,
           title: "新增客户标签",
           closeBtn: 1,
           shadeClose: true,
           maxmin: true, //开启最大化最小化按钮
           area: ['630px', '530px'],
           offset: ['50px', '300px'],
           fix: false, //不固定
           content: jypath +'/customer/customerProjectQuestion/addCusTag?customerId=${customerId}&cusTagIds='+cusTagIds+'&type='+type+'&custId='+custId,
           end: function(){
        	   queryCusTagList();
        	   queryQuestion();
           }
       });
	   //默认窗口最大化
	   layer.full(index);
   }
   
   //清空查询条件
   function clearFrom(){
       $("#typeId").val("");
       $("#tagName").val("");
   }
   //查询已生成的客户标签ID
   function queryCusTagList(){
	   var params = {
			"tagId": $("#typeId").val(),
	        "tagName": $("#tagName").val(),
            "customerId": "${customerId}",
            "projectId": "${projectId}",
            "pageNum": $("#tagPageNum").val(),
            "pageSize": $("#tagPageSize").val()
        };
        JY.Ajax.doRequest(null, jypath +'/customer/customerProjectQuestion/queryCusTagList', params, function(data){
            $("#cusTagList").empty();
            var page = data.obj;
            //数据集合
            var results = page.rows;
            //分页数据
            var pageNum = page.pageNumber, pageSize = page.pageSize, totalRecord = page.total;
            if(results != null && results.length > 0){
            	var leng = (pageNum-1) * pageSize;//计算序号
                for(var i = 0; i < results.length; i++){
                	var info = results[i];
            	    var html ='<li id="'+info.id+'" tagId="'+info.tagExtId+'">';
            	    html +='<h3 class="item-inline">'+(i+leng+1)+'、'+info.question+'</h3>';
            	    html +='<div class="date-box">';
            	    html +='<span class="date-margin15">';
            	    html +='<span class="date-span color666" title="创建时间">';
            	    html +='<img src="${jypath}/resources/images/list-add.png">&nbsp;';
            	    html += JY.Date.Format(info.createTime, 'yyyy-MM-dd');
            	    html +='</span>';
            	    html +='</span>';
            	    html +='<span>';
            	    html +='<span class="date-span color666" title="修改时间">';
            	    html +='<img src="${jypath}/resources/images/list-edit.png">&nbsp;';
            	    html += JY.Date.Format(info.updateTime, 'yyyy-MM-dd');
            	    html +='</span>';
            	    html +='</span>';
            	    html +='</div>';
            	    html +='<div class="detail-item">';
            	    html +='<span class="qs-relation">'+info.tagValue+'</span>';
            	    html +='</div>';
            	    html +='</li>';
            	    $("#cusTagList").append(html);
                }
                JY.Page.setSimPage("cusTagForm","cusTagPageing",pageSize,pageNum,totalRecord,"queryCusTagList");
            }else{
                //隐藏分页
                $("#cusTagPageing ul").empty();
            }
        });
   }
   
   //删除标签
   function delCusTagConfirm(){
	   //获取选中cusTagId
	   var cusTagId = $(".line").attr("id");
	   if(cusTagId == undefined){
		   layer.msg("请选择要删除的标签");
		   return false;
	   }
	   
	   layer.confirm('是否删除已选中的标签？', {
		   btn: ['是','否'] //按钮
	   }, function(index){
		   delCusTag(cusTagId);
		   layer.close(index);
	   });
   }
   function delCusTag(cusTagId){
	   $.ajax({
           type: 'post',
           url: '${jypath}/customer/customerProjectQuestion/delCusTag',
           data:{
               "id": cusTagId,
           },
           dataType: 'json',
           success: function(data){
               if(data.res != "1"){
                   return false;
               }
               layer.msg("标签已删除");
               queryCusTagList();
           }
       });
   }
   
   function editCusTag(){
	   //获取选中cusTagId
	   var id = $(".line").attr("id");
       var tagId = $(".line").attr("tagId");
       if(id == undefined){
           layer.msg("请选择要修改的标签");
           return false;
       }
       
       getCusTagList(tagId, id, "edit");
   }
   
   //解决选中input框按回车时会刷新页面的问题
   function ClearSubmit(e) {
       if (e.keyCode == 13) {
           return false;
       }
   }
</script>
</html>